<template>
	<view :data-theme="theme">
		<view style="height: 100%">
			<view class="evaluate-list">
				<view class="generalComment acea-row row-between-wrapper">
					<view class="acea-row row-middle font_color">
						<view class="evaluate">评分</view>
						<view class="start" :class="'star' + replyData.replyStar"></view>
					</view>
					<view>
						<text class="font_color">{{ replyData.replyChance ? replyData.replyChance * 100 : 0 }}%</text>
						好评率
					</view>
				</view>
				<view class="nav acea-row row-middle">
					<view class="item" :class="type == 0 ? 'bg-color' : ''" @click="changeType(0)">全部({{ replyData.sumCount || 0 }})</view>
					<view class="item" :class="type == 1 ? 'bg-color' : ''" @click="changeType(1)">好评({{ replyData.goodCount || 0 }})</view>
					<view class="item" :class="type == 2 ? 'bg-color' : ''" @click="changeType(2)">中评({{ replyData.inCount || 0 }})</view>
					<view class="item" :class="type == 3 ? 'bg-color' : ''" @click="changeType(3)">差评({{ replyData.poorCount || 0 }})</view>
				</view>
				<userEvaluation :reply="reply"></userEvaluation>
			</view>
			<view class="loadingicon acea-row row-center-wrapper">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view
				class="noCommodity"
				v-if="(type == 0 && !replyData.sumCount) || (type == 1 && !replyData.goodCount) || (type == 2 && !replyData.inCount) || (type == 3 && !replyData.poorCount)"
			>
				<view class="pictrue">
					<image :src="urlDomain + 'crmebimage/presets/noEvaluate.png'"></image>
					<view class="default_txt">暂无任何评论哦~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getReplyList, getReplyConfig } from '@/api/product.js';
import userEvaluation from '../components/userEvaluation';
let app = getApp();
export default {
	components: {
		userEvaluation
	},
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			replyData: {},
			product_id: 0,
			reply: [],
			type: 0,
			loading: false,
			loadend: false,
			loadTitle: '加载更多',
			page: 1,
			limit: 20,
			theme: app.globalData.theme
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		let that = this;
		if (!options.productId)
			return that.$util.Tips(
				{
					title: '缺少参数'
				},
				{
					tab: 3,
					url: 1
				}
			);
		that.productId = options.productId;
	},
	onShow: function () {
		this.getProductReplyCount();
		this.getProductReplyList();
	},
	methods: {
		/**
		 * 获取评论统计数据
		 *
		 */
		getProductReplyCount: function () {
			let that = this;
			getReplyConfig(that.productId).then((res) => {
				that.$set(that, 'replyData', res.data);
			});
		},
		/**
		 * 分页获取评论
		 */
		getProductReplyList: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = '';
			getReplyList(that.productId, {
				page: that.page,
				limit: that.limit,
				type: that.type
			})
				.then((res) => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					that.reply = that.$util.SplitArray(list, that.reply);
					that.$set(that, 'reply', that.reply);
					that.loading = false;
					that.loadend = loadend;
					if (that.reply.length) {
						that.loadTitle = loadend ? '😕人家是有底线的~~' : '加载更多';
					}
					that.page = that.page + 1;
				})
				.catch((err) => {
					(that.loading = false), (that.loadTitle = '加载更多');
				});
		},
		/*
		 * 点击事件切换
		 * */
		changeType: function (e) {
			let type = parseInt(e);
			if (type == this.type) return;
			this.type = type;
			this.page = 1;
			this.loadend = false;
			this.$set(this, 'reply', []);
			this.getProductReplyList();
		}
	},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		this.getProductReplyList();
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
	height: 100%;
}
.font_color {
	@include main_color(theme);
}
.evaluate-list {
	padding: 30rpx 0 0 0;
	background-color: #fff;
}
.evaluate-list .generalComment {
	padding: 0 30rpx;
	margin-top: 1rpx;
	background-color: #fff;
	font-size: 28rpx;
	color: #808080;
}

.evaluate-list .generalComment .evaluate {
	margin-right: 7rpx;
	color: #333333;
	font-size: 28rpx;
}

.evaluate-list .nav {
	font-size: 24rpx;
	color: #282828;
	padding: 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f5f5f5;
}

.evaluate-list .nav .item {
	font-size: 24rpx;
	color: #282828;
	border-radius: 27rpx;
	height: 54rpx;
	padding: 0 20rpx;
	background-color: #f4f4f4;
	line-height: 54rpx;
	margin-right: 17rpx;
}

.evaluate-list .nav .item.bg-color {
	color: #fff;
	@include main_bg_color(theme);
}
.noCommodity {
	margin-top: 32%;
}
.default_txt {
	font-size: 26rpx;
	color: #999;
	text-align: center;
}
</style>
